<template>
  <div class="achievement" v-cloak>
    <div class="bg_img">
      <img src="../assets/image/a_01.png" alt="">
      <p>绑定手机号</p>
    </div>
    <div class="bindphone">
        <div class="bind_ul">
          <div class="bind_li">
            <span class="bind_t">手机号 +86:</span>
            <input type="number" class="bind_in1" v-model="info.mobile">
          </div>
          <div class="bind_li">
            <span class="bind_t">验证码:</span>
            <input type="text" class="bind_in2" v-model="info.code">
            <span class="bind_s" @click="send_code">{{time==0 ?'获取验证码' : time+'s后重试'}}</span>
          </div>
        </div>
        <div class="bindbtn" @click="submit">下一步</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'bind',
    data () {
      return {
        list: {},
        cardsta: false,
        nocard: false,
        show: false,
        classify_list: [],
        mobile: '',
        code: '',
        time: 0,
        info: {
          mobile: '',
          code: '',
          openid: '',
          headimg: '',
          nickname: ''
        }
      }
    },
    methods: {
      submit: function () {
        var thisObj = this
        if (thisObj.info.mobile === '') {
          thisObj.$vux.toast.show({
            text: '请输入手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!thisObj.is_mobile(thisObj.info.mobile)) {
          thisObj.$vux.toast.show({
            text: '请输入正确的手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.info.code === '') {
          thisObj.$vux.toast.show({
            text: '请输入验证码',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.submitAjax()
      },
      submitAjax: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: thisObj.info,
          slient: true,
          userinfo: false,
          url: 'Login/bindMobile',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$chaos.setUserInfo(res.result.access_token)
              thisObj.$vux.toast.show({
                text: '绑定成功',
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              setTimeout(function () {
                window.location.href = '#/Nearby'
              }, 1000)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      is_mobile: function (mobile) {
        return /^1[34578]\d{9}$/.test(mobile)
      },
      send_code: function () {
        var thisObj = this
        if (thisObj.time > 0) {
          return false
        }
        if (thisObj.info.mobile === '') {
          thisObj.$vux.toast.show({
            text: '请输入手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!thisObj.is_mobile(thisObj.info.mobile)) {
          thisObj.$vux.toast.show({
            text: '请输入正确的手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            mobile: thisObj.info.mobile
          },
          slient: true,
          userinfo: false,
          url: 'Code/sendBindMobile',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.time = 60
              var timer = setInterval(function () {
                thisObj.time--
                if (thisObj.time === 0) {
                  clearInterval(timer)
                }
              }, 1000)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getmode: function (content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website' && sessionStorage[content]) {
          return JSON.parse(sessionStorage[content])
        } else if (mode === 'client' && localStorage[content]) {
          let content = JSON.parse(localStorage[content])
          if (content.expire_time * 1000 < new Date().getTime()) {
            localStorage[content] = null
            return false
          }
          return content
        } else {
          return false
        }
      },
      verify: function () {
        this.$chaos.setTitle('绑定手机号')
        this.$store.commit('headerShow', false)
//        this.$store.commit('title', '绑定手机号')
        this.$store.commit('footerShow', false)
        this.info.openid = this.getmode('openids')
        this.info.nickname = this.getmode('nickname')
        this.info.headimg = this.getmode('headimgurl')
        this.info.unionid = this.getmode('unionid')
        this.setmode('openids', '')
        this.setmode('nickname', '')
        this.setmode('headimgurl', '')
        this.setmode('unionid', '')
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  .bg_img img{
    float: left;
    margin:15px 0px 0px 15px;
    width:9px;
  }
  .bg_img p{
    margin:0px 40px;
    text-align: center;
    color: #fff;
    line-height:40px;
    font-size: 16px;
    padding-top:5px;
  }
  .bg_img{
    width:100%;
    height:240px;
    background: url("../assets/image/a_02.png");
    background-size: cover;
  }
  .bindbtn{
    width:70%;
    margin:40px auto;
    background: #1097ff;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 5px 5px;
  }
  .bind_s{
    padding: 0px 14px;
    background: #f1f1f1;
    color: #717171;
    text-align: center;
    height: 25px;
    line-height: 25px;
    border-radius: 16px;
  }
  .bind_in1{
    width:calc(100% - 90px);
    float: left;
    line-height: 40px;
    margin-left:10px;
  }
  .bind_in2{
   float: left;
    line-height: 40px;
    width:calc(100% - 154px);
    margin-left:10px;
  }
 .bind_s{
    float: right;
   margin-top: 7px;

 }
  .bind_t{
    float: left;
  }
  .bindphone{
    width:calc(100% - 30px);
    position: absolute;
    top:160px;
    left:15px;
  }
  .bind_li{
    line-height: 40px;
    padding: 0px 15px;
    border-bottom: 1px solid #cacaca;
    clear: both;
    overflow: hidden;
  }
  .bind_li input{
    border:0px;
  }
  .bind_ul .bind_li:last-child{
    border-bottom: 0px;
  }
  .bind_ul{
    border:1px solid #cacaca;
    background: #fff;
    border-radius: 5px 5px;
  }
  .bindbtn{

  }
</style>
